<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>内边距</title>

        <style type="text/css">
            h3 { text-align: center ; }
            .wrapper { font-size: 30px ;  border: 1px solid blue ; width: 800px; margin: 15px auto ; }

            /* 亲子选择器 ( 也被人称作 直接子元素选择器 )*/
            .first>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding-top: 25px ;
                padding-bottom: 25px ;
                padding-left: 25px ;
                padding-right: 25px ;
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

            .second>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding: 25px ;
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

            .third>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding-top: 25px ;
                padding-bottom: 25px ;
                padding-left: 100px ;
                padding-right: 100px ;
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

            .fourth>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding: 25px 100px ;
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

            .fifth>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding: 10px 30px 50px 70px ;
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

            .sixth>div {
                margin: 15px ; /* 设置元素的外边距 */
                border: 1px solid red ;
                padding: 10px 30px 50px auto ; /* 无效！！！ 无效！！！ 无效！！！ */
                background: #dedede content-box content-box ;
                height: 50px ;
                width: 200px ;
            }

        </style>

    </head>
    <body>

        <div class="wrapper first">
            <div>1</div>
        </div>

        <div class="wrapper second">
            <div>2</div>
        </div>

        <div class="wrapper third">
            <div>3</div>
        </div>

        <div class="wrapper fourth">
            <div>4</div>
        </div>

        <div class="wrapper fifth">
            <div>5</div>
        </div>

        <div class="wrapper sixth">
            <div>padding取值为auto是无效的</div>
        </div>
        
    </body>
</html>